<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-position: center;
        background-size: cover;
        transition: 0.5s;
      }
      body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
      }
      .slide-container {
        width: 70vw;
        height: 70vh;
        position: relative;
        /* 关键 */
        overflow: hidden;
      }
      .slide {
        opacity: 0;
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-size: cover;
        position: absolute;
        top: -15vh;
        left: -15vw;
        border: solid;
        z-index: 1;
        transition: 0.5s;
      }
      .slide.active {
        opacity: 1;
      }
      .arrow {
        position: fixed;
        background-color: transparent;
        padding: 20px;
        font-size: 30px;
        border: 1px solid black;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
      .arrow-left {
        left: calc(15vw - 70px);
      }
      .arrow-right {
        right: calc(15vw - 70px);
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <div
        class="slide active"
        style="background-image: url(./imgs/photo_1.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/photo_2.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/photo_3.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/photo_4.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(./imgs/photo_5.jpg)"
      ></div>
      <button class="arrow arrow-left" id="left">⬅️</button>
      <button class="arrow arrow-right" id="right">➡️</button>
    </div>
    <script>
      const body = document.body;
      const slides = document.querySelectorAll('.slide');
      const left = document.getElementById('left');
      const right = document.getElementById('right');
      const  box = document.querySelector('.slide-container')
      //记录当前展示的是那张
      //索引从0开始
      let activeSlide = 0;
      //点击右移 下一张
      let moveNext = () => {
        activeSlide++;
        //边界处理
        if (activeSlide == slides.length) {
          activeSlide = 0;
        }
        setActiveSlide();
        setBgToBody();
      };
      right.onclick = moveNext;
      //点击左移 上一张
      let movePrev = () => {
        activeSlide--;
        //边界处理
        if (activeSlide < 0) {
          activeSlide = slides.length - 1;
        }
        setActiveSlide();
        setBgToBody();
      };
      left.onclick = movePrev;
      // setInterval(() => {
      //   movePrev();
      // }, 1000);
      //移动的时候我们既要切换slide-container的也要切换body的
      function setBgToBody() {
        body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
      }
      setBgToBody();
      function setActiveSlide() {
        slides.forEach((slide) => slide.classList.remove('active'));
        slides[activeSlide].classList.add('active');
      }

      // 开启定时器
       var timer =setInterval(() => {
        moveNext()
      }, 2000);
      //2. 鼠标经过，清除计时器
      box.addEventListener('mouseenter', function () {
        clearInterval(timer);
        timer = null; //清除计时器
      });
      //2. 鼠标离开，开始计时器

      box.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
          moveNext();
        }, 1000);
      });
     
    </script>
  </body>
</html>
